import { createApp, nextTick } from 'vue'
import './style.css'
import App from './App.vue'
import router from '@/router/routes'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
import 'swiper/css/swiper.css'
import store from '@/store/index.js'

const app = createApp(App)
app.use(router)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }

app.use(ElementPlus)
app.use(store)

app.config.globalProperties.$axios=axios
axios.defaults.withCredentials = true

/**
 * 
 * 以下两个全局自定义指令可能存在的问题：首次登陆时会加载不清 切换过快时会出现错误问题
 * 解决方案 以下两个全局自定义指令可能存在的问题：首次登陆时会加载不清 
 * 初步解决方案 暂时测试没问题
 * 
 */
//全局指定已指令 top隐藏时切换 
app.directive('hiddentop',{
  mounted: (el:HTMLElement) => {    
    const observer = new IntersectionObserver((enr)=>{
      nextTick(() => {
        if (enr[0].intersectionRatio > 0) store.commit('setIsScrollHegiht',false)  
        else store.commit('setIsScrollHegiht',true)
      })

    })
    observer.observe(el);
  }
})
//绑定的值显示时展示top下方的专栏
app.directive('hiddencolumn',{
  mounted: (el:HTMLElement) => {    
    const observer = new IntersectionObserver((enr)=>{
      nextTick(() => {
        //0不可见 1完全可见 0-1表示部分可见
        if (enr[0].intersectionRatio > 0) store.commit('setisScrollShow',false)  // 元素进入文档视口，显示
        else store.commit('setisScrollShow',true)  // 元素离开文档视口，隐藏
      })

    })
    observer.observe(el);
  }
})

app.mount('#app')
